<template>
    <div class="pictureinfo-container">
        <h3>{{infolist.title}}</h3>
        <p class="subtitle">
            <span>发表时间：{{infolist.add_time | dataFormat}} </span>
             <span>点击次数：{{infolist.click}}次</span>
        </p>
        <hr>
        <!-- 缩略图区域 -->
        <div class="thumbs">
            <vue-preview  :slides="list" @close="handleClose"></vue-preview>
        </div>
       
        <!-- 图片内容区域 -->
        <div class="content" v-html="infolist.content"></div>

        <!-- 放置一个现成的评论子组件 -->
        <cmt-box :id="id"></cmt-box>
    </div>
</template>
<script>
//1、导入评论子组件
import comment from "../subcomponents/comment.vue";
export default {
    data(){
        return{
            id: this.$route.params.id, //从路由中获取到的图片id
            infolist:[],//图片详情
            list:[], // 缩略图数组
            index:1, //缩略图计数器
        }
    },
    created(){
        this.getPictureInfo()
        this.getThumbs()
    },
    methods:{
        getPictureInfo(){//获取图片详情
            this.axios.get('api/getimageinfo/'+this.id).then(result => {
                if(result.data.status === 0){
                    this.infolist = result.data.message[0] //一个id对应一个详情，所以虽然是数组，但只取第一个
                }
            })
        },
        getThumbs(){
            //获取缩略图
            this.axios.get('api/getthumimages/' + this.id).then(result => {
                if(result.data.status === 0){
                    //循环每个图片数据，补全图片的宽和高
                    result.data.message.forEach(item =>{
                        item.w = 600;
                        item.h = 400;
                        item.msrc = item.src;
                        item.alt = 'picture'+ this.index;
                        item.title = 'Image Caption '+ this.index;
                        this.index++; 
                    })
                    //把完整的数据保存到list中
                    this.list =  result.data.message
                    this.index = 1
                }
            })
        },
        handleClose () {
          console.log('close event')
      }

    },
    components:{//2、注册评论子组件
        'cmt-box':comment
    }
}
</script>
<style lang="scss" scoped>
.pictureinfo-container{
    padding :3px;
    h3{
        color: #26A2FF;
        font-size: 15px;
        text-align: center;
        margin:15px 0; //上下15，左右为0
    }
    .subtitle{
        display: flex;
        justify-content: space-between;//两端对齐
        font-size: 13px;
    }
    .content{
        font-size: 13px;
        line-height: 30px;//行间距

    }
   
    .thumbs {
            /deep/ .my-gallery{   //deep深层作用选择器
                display: flex;
                flex-wrap:wrap;//默认换行
                figure{
                     width: 30%;
                     margin: 5px;
                     img{
                         width: 100%;
                         box-shadow: 0 0 8px #999;
                         border-radius: 5px;
                     }
                 }
            }
    }
}
</style>